<!-- 隐患地图 -->
<template>
  <div class='map-wrapper'>
    <baidu-map class="bm-view" :mapClick="false" :center="center" @zoomend="syncCenterAndZoom" :scroll-wheel-zoom="true" @ready="handler" :zoom="zoom">
      <bm-marker v-for="(item,index) in markers" :key="index" @mouseover="infoWindowOpen(item)" @mouseout="infoWindowClose(item)" :position="{lng: item.lng, lat:item.lat}" @click="markerClick(item)">
        <bm-info-window :width="420" :height="0" :position="{lng: item.lng, lat:item.lat}" :show="item.show">
          <el-image style="heigth:100px;width:139px;float:left" :src="baseURL+'/voucher'+url" fit="fill"></el-image>
          <div class="detail" style="margin-left:150px;">
            <h4>{{pointInfo.address}}</h4>
            <p>资产状态:{{pointInfo.state}}</p>
            <p>住房面积:{{pointInfo.buildArea}}</p>
            <p>整改进度:{{pointInfo.state}}</p>
            <p>录入时间:{{pointInfo.date|parseTime}}</p>
          </div>
        </bm-info-window>
      </bm-marker>
      <!-- 自定义地图按钮 -->
      <bm-control style="margin:20px;">
        <el-select @change="selectChange" v-model="selectInfo" placeholder="请搜索隐患状态">
          <el-option v-for="item in hiddens" :key="item.id" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </bm-control>
    </baidu-map>
    <dataToast>当前共有{{totals}}处隐患资产~</dataToast>

    <el-drawer v-loading="loading" element-loading-text="数据加载中" size="25%" title="隐患资产" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <drawer-list :condition="condition"></drawer-list>
    </el-drawer>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mapConfig from "@/assets/custom_map_config.json";
import DataToast from "../baiduMap/components/DataToast";
import DrawerList from "./DrawerList";

import {
  getPosition,
  getByPoint,
  getGUIDByPosition,
  getAssetByHidden,
  getQueryAssetByHidden
} from "@/api/map";
import { parseTime } from "@/utils/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { DataToast, DrawerList },
  filters: {
    parseTime
  },
  data() {
    //这里存放数据
    return {
      direction: "ltr",
      drawer: false,
      condition: {},
      zoom: 13,
      center: {},
      loading: false,
      mapStyle: {
        styleJson: mapConfig
      },
      markers: [],
      baseURL: "",
      patrol: {},
      selectInfo: "全部隐患",
      hiddens: [
        { id: 1, name: "全部隐患" },
        { id: 2, name: "火灾隐患" },
        { id: 3, name: "房屋结构隐患" },
        { id: 4, name: "配套设施隐患" },
        { id: 5, name: "自然灾害隐患" },
        { id: 6, name: "违章搭建隐患" },
        { id: 7, name: "其它隐患" }
      ],
      totals: 0,
      pointInfo: {},
      url: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //关闭抽屉
    handleClose(done) {
      done();
    },
    handler({ BMap, map }) {
      getPosition().then(res => {
        console.log("位置", res);
        this.center = { lng: res.lng, lat: res.lat };
        // let data = {
        //   limit: 100000,
        //   offset: 0,
        //   lng: this.center.lng,
        //   lat: this.center.lat,
        //   distance: 5000
        // };
        // getByPoint(data).then(res => {
        //   this.markers = res;
        //   this.markers.forEach(item => {
        //     this.$set(item, "show", false);
        //   });
        //   this.totals = res.length;
        // });
      });
      getQueryAssetByHidden({ hiddenType: this.selectInfo }).then(res => {
        this.markers = res.rows;
        this.markers.forEach(item => {
          this.$set(item, "show", false);
        });
        this.totals = res.total;
      });
    },
    //地图缩放事件
    syncCenterAndZoom(e) {
      if (e.target.getZoom() < this.zoom) {
        this.zoom = e.target.getZoom(); //获取缩放等级
        console.log("缩放等级", this.zoom);
      }
    },
    //离开点位时
    infoWindowClose(item) {
      item.show = false;
    },
    //移动到点位时
    infoWindowOpen(item) {
      console.log("移动到点位时", item);
      item.show = true;
      let data = { lng: item.lng, lat: item.lat };
      getGUIDByPosition(data).then(res => {
        this.pointInfo = res.hidden;
        let data = { limit: 1000, offset: 0, hiddenGuid: res.guid };
        getAssetByHidden(data).then(res => {
          this.url = Object.values(res.fileBytes)[0];
        });
      });
    },
    markerClick(item) {},
    selectChange(value) {
      this.drawer = true;
      this.markers = [];
      let data = { hiddenType: value };
      this.condition = data;
      this.loading = true;
      getQueryAssetByHidden(data).then(res => {
        this.loading = false;
        this.markers = res.rows;
        this.markers.forEach(item => {
          this.$set(item, "show", false);
        });
        this.totals = res.total;
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (process.env.NODE_ENV === "production") {
      this.baseUrl = localStorage.getItem("baseUrl");
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.bm-view {
  width: 100%;
  height: calc(100vh - 50px);
}
</style>